<template>
  <div class="talk">
    <button @click="getLoveTalk">获取土味</button>
    <button @click="clearLoveTalk">清空土味</button>
    <ul>
      <li v-for="talk in talkList" :key="talk.id">
        {{ talk.title }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="LoveTalk">
import axios from "axios"
import { nanoid } from "nanoid"
import { reactive, ref } from "vue"
import { useLoveTalkStore } from "@/store/loveTalk"
import { storeToRefs } from "pinia"

const loveTalkStore = useLoveTalkStore()
let { talkList } = storeToRefs(loveTalkStore)

// 通过 store 的 $subscribe() 方法侦听 state 及其变化
loveTalkStore.$subscribe((mutate, state) => {
  // console.log("这是修改事件，无需关心", mutate);
  localStorage.setItem("talkList", JSON.stringify(state.talkList))
})

async function getLoveTalk() {
  loveTalkStore.getTalk()
}
function clearLoveTalk() {
  loveTalkStore.clearTalk()
}
</script>


<style scoped>
.talk {
  background-color: orange;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>